<!DOCTYPE html> 
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Split it up</title> 
    <link rel="stylesheet" href="lib/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="lib/date.js"></script>
    <script src="lib/jquery/jquery-1.7.2.js"></script>
    <script src="lib/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript">
        //set the default page transition
        $.mobile.defaultPageTransition = 'fade';
    </script>
    <!-- app layer-->
    <script type="text/javascript" src="app/fw.js"></script>
    <!-- app models-->
    <script type="text/javascript" src="app/STB_models.js"></script>
    
    <script type="text/javascript" src="app/STB_persist.js"></script>
    <script type="text/javascript" src="app/STB_repo.js"></script>
    <script type="text/javascript" src="app/STB_view.js"></script>
    <script type="text/javascript" src="app/STB.js"></script>
    <script type="text/javascript">
        $('#show-bill').live( 'pagebeforeshow',function(event){
            AppInstance.showSelectedBill();
        });
        $('#new-bill').live( 'pagebeforeshow',function(event){
            $('#form-new-bill').submit(function() {
	            AppInstance.addBill($('#bill-name').val());
	            return false;
	        });
        });
        
        $('#bills-start').live( 'pagebeforeshow',function(event){
            AppInstance.getStartPageBills();
        });
        
        $('#bills-archive').live( 'pagebeforeshow',function(event){
            AppInstance.getBills();
        });
        $('#add-item').live('pagebeforeshow', function(event){
        	$('#form-add-item').submit(function() {
                var formVals = $(this).serializeArray();
                var itemInfo = $('#form-add-item input').not('#item-sharers input').not('input:hidden').serializeArray();
                var sharers = $('#item-sharers input:checkbox').serializeArray();
                AppInstance.addItemWithSharers(itemInfo, sharers);
			  return false;
			});
        });
        $('#add-item').live('pagecreate', function(event){
        	AppInstance.getPeopleSelector();
        });
        
        
        $('#add-person').live('pagebeforeshow', function(event){
        	$('#form-add-person p a').bind('tap', function(event){
        		AppInstance.addPersonField();
				return false;
	    	});
	    	
	    	$('#form-add-person').submit(function() {
				var formVals = $(this).serializeArray();
				AppInstance.addPerson(formVals);
			  	return false;
			});
        });
        $('#add-person').live('pagecreate', function(event){
            AppInstance.addPersonFormShow();
        });
    </script>
    
</head> 

<body> 

<div data-role="page" id="bills-start">

    <div data-role="header" data-position="inline">
    	<!-- constant -->
    	<h3>split it up</h3>
    	<div data-role="navbar" data-iconpos="top">
    		<ul>
    			<li>
    				<a href="new_bill.html" data-icon="plus" data-role="button">new bill</a>	
    			</li>
    			<li>
    				<a href="start.html" data-icon="star" data-role="button">groups</a>	
    			</li>
    			<li>
    				<a href="bills_archive.html" data-icon="grid" data-role="button">bills archive</a>	
    			</li>
    			<li>
    				<a href="start.html" data-icon="gear" data-role="button">options</a>
    			</li>
        	</ul>
        </div>

        <!-- variable between pages-->
    </div><!-- /header -->

   <div data-role="content">   
        <!-- bills list -->
        <div style="clear:both;margin-top:2%;" id="bills-start-list">
        	
        </div>
    </div><!-- /content -->
    <div data-role="footer" data-position="fixed">
        <h4>ad space</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>